<template>
  <div class="navbar">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="15" :lg="13" :xl="13" class="title">
        <span>title</span>
        <span>描述</span>
      </el-col>
      <el-col class="hidden-sm-only content" :xs="0" :md="9" :lg="8" :xl="6">
        <el-menu
          router
          mode="horizontal"
          style="height: 100%; border: none"
          :default-active="defaultActive"
        >
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/share">
            <i class="el-icon-share"></i>
            <span>踩坑小能手</span>
          </el-menu-item>
          <el-menu-item index="/notebook">
            <i class="el-icon-notebook-1"></i>
            <span>笔记</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    defaultActive: {
      type: String
    }
  }
};
</script>
<style scoped>
.navbar {
  background-color: #fff;
  line-height: 3.75rem;
  /* overflow: hidden; */
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.title {
  padding-left: 20px;
}
.menu-div {
  max-width: 400px;
}
</style>
